@page "/Stock_Chart"
@inject NavigationManager NavigationManager
@inject HttpClient HttpClient
@using System.Text.Json
@using System.Text.Json.Serialization

<Tabs>
    <TabPane Key="1" Tab="Sample 1">
        <Stock OnFirstRender="OnChartRender" Config="config1" />
    </TabPane>
    <TabPane Key="2" Tab="Sample 2">
        <Stock OnFirstRender="OnChartRender" Config="config2" />
    </TabPane>
    <TabPane Key="3" Tab="Sample 3">
        <Stock OnFirstRender="OnChartRender" Config="config3" />
    </TabPane>
    <TabPane Key="4" Tab="Sample 4">
        <Stock OnFirstRender="OnChartRender" Config="config4" />
    </TabPane>
    <TabPane Key="5" Tab="Sample 5">
        <Stock OnFirstRender="OnChartRender" Config="config5" />
    </TabPane>
    <TabPane Key="6" Tab="Sample 6">
        <Stock OnFirstRender="OnChartRender" Config="config6" />
    </TabPane>
</Tabs>

<Divider>动手实验</Divider>
<DynamicExample @ref="@example">
    <Stock @ref="@chart" />
</DynamicExample>

@code {
    public IChartComponent chart;
    DynamicExample example;

    protected override void OnAfterRender(bool firstRender)
    {
        base.OnAfterRender(firstRender);
        example.Chart = chart;
    }

    private async void OnChartRender(IChartComponent stockChart)
    {
        var data = await DemoData.StockDataAsync(NavigationManager, HttpClient);
        await stockChart.ChangeData(data);
    }

    #region 示例1

    StockConfig config1 = new StockConfig()
        {
            Padding = "auto",
            XField = "trade_date",
            YField = new string[4] { "open", "close", "high", "low" }
        };


    #endregion 示例1

    #region 示例2

    StockConfig config2 = new StockConfig()
        {
            Padding = "auto",
            XField = "trade_date",
            YField = new string[4] { "open", "close", "high", "low" },
            Meta = new
            {
                close = new
                {
                    Alias = "收盘价",
                },
                open = new
                {
                    Alias = "开盘价",
                },
                high = new
                {
                    Alias = "最高价",
                },
                low = new
                {
                    Alias = "最低价",
                },
                vol = new
                {
                    Alias = "成交量",
                }
            },
        };


    #endregion 示例2

    #region 示例3

    StockConfig config3 = new StockConfig()
        {
            Padding = "auto",
            XField = "trade_date",
            YField = new string[4] { "open", "close", "high", "low" },
            // 绿涨红跌
            FallingFill = "#ef5350",
            RisingFill = "#26a69a",

        };


    #endregion 示例3

    #region 示例4

    StockConfig config4 = new StockConfig()
        {
            Padding = "auto",
            XField = "trade_date",
            YField = new string[4] { "open", "close", "high", "low" },
            Meta = new
            {
                close = new
                {
                    Alias = "收盘价",
                },
                open = new
                {
                    Alias = "开盘价",
                },
                high = new
                {
                    Alias = "最高价",
                },
                low = new
                {
                    Alias = "最低价",
                },
                vol = new
                {
                    Alias = "成交量",
                }
            },
            Tooltip = new Charts.Tooltip
            {
                Fields = new string[] { "open", "close", "high", "low", "vol" }
            }
        };


    #endregion 示例4

    #region 示例5

    StockConfig config5 = new StockConfig()
        {
            Padding = "auto",
            XField = "trade_date",
            YField = new string[4] { "open", "close", "high", "low" },
            Meta = new
            {
                close = new
                {
                    Alias = "收盘价",
                },
                open = new
                {
                    Alias = "开盘价",
                },
                high = new
                {
                    Alias = "最高价",
                },
                low = new
                {
                    Alias = "最低价",
                },
                vol = new
                {
                    Alias = "成交量",
                }
            },
            Tooltip = new Charts.Tooltip()
            {
                Crosshairs = @"{
          line: {
            style: {
              lineWidth: 0.5,
              stroke: 'rgba(0,0,0,0.25)',
            },
          },
          text: (type, defaultContent, items) => {
            let textContent;
            if (type === 'x') {
              const item = items[0];
              textContent = item ? item.title : defaultContent;
            } else {
              textContent = `${defaultContent.toFixed(2)}`;
            }
            return {
              position: type === 'y' ? 'start' : 'end',
              content: textContent,
              // 自定义 crosshairs text 样式
              style: {
                fill: '#dfdfdf',
              },
            };
          },
          // 自定义 crosshairs textBackground 样式
          textBackground: {
            padding: [4, 8],
            style: {
              fill: '#363636',
            },
          },
        }"
            }

        };


    #endregion 示例5

    #region 示例6

    StockConfig config6 = new StockConfig()
        {
            Padding = "auto",
            XField = "trade_date",
            YField = new string[4] { "open", "close", "high", "low" },
            Slider = new Slider()
            {
                Start = 0,
            }
        };


    #endregion 示例6



}

